<script setup lang="ts">
// ==> props
withDefaults(defineProps<{ data?: any }>(), {
  data: () => ({}),
});

// ==> methods
// 获取状态
// unPay未支付 paid 已付款  finished 订单完成  remove 已完成被删除  refund 退款申请  refund_success 退款成功  refund_fail  退款失败
const getStatus = (status: string):{text: string, color: string} => {
  switch (status) {
    case "unPay":
      return {
        text: "未支付",
        color: "#F59A23",
      };
    case "paid":
      return {
        text: "已付款",
        color: "#19C085",
      };
    case "finished":
      return {
        text: "订单完成",
        color: "#19C085",
      };
    case "remove":
      return {
        text: "已完成被删除",
        color: "#999999",
      };
    case "refund":
      return {
        text: "退款申请",
        color: "#F59A23",
      };
    case "refund_success":
      return {
        text: "退款成功",
        color: "#999999",
      };
    case "refund_fail":
      return {
        text: "退款失败",
        color: "#F59A23",
      };
    default:
      return {
        text: "未知状态",
        color: "#999999",
      };
  }
}
</script>

<template>
    <div @click="$router.push('/kaquan/shiyongInfo?orderId=' + data.orderId)" class="border-bottom py-20 logbox">
      <!-- 内容 -->
      <div class="mb-11">
        <div class="flex-h-between">
          <div class="f15 f-500 mr-14 lh-20" style="color: #070707">
              订单号：{{ data.orderId }}
          </div>
          <span class="f14 ff-DIN-Regular" style="color: #F59A23">{{ data.orderAmount }}J</span>
        </div>
        <div class="flex-h-between">
          <div class="f14 mt-11" style="color: #7F8086">
            订单状态：<span :style="{color:getStatus(data.currentStatus).color}">{{ getStatus(data.currentStatus).text }}</span>
          </div>
          <span class="f14 ff-DIN-Regular mt-11" style="color: #7F8086">消费日期：{{ data.createTime }}</span>
        </div>
      </div>
    </div>
</template>

<style lang="less" scoped>
.logbox {
  border-color: #97979720;
  &:last-of-type {
    border-bottom: none!important;
  }
}
.status {
  width: 50px;
  height: 17px;
  border-radius: 3px;
  border: 1px solid #66c328;
  font-size: 10px;
  font-weight: 400;
  color: #3bc226;

  &.fail {
    color: #df5359;
    border-color: #df5359;
  }
}

.fail-msg {
  background: #f9f9f9;
  border-radius: 3px;
  padding: 7px 11px 9px 7px;
  font-size: 11px;
  font-weight: 400;
  color: #c1c1c1;
  line-height: 15px;
}
</style>
